<template>
  <Collapse simple class="component-chaptet_tree" v-model="active_tap">
    <Panel
      v-for="(item1, index1) in datas"
      :key="index1"
      :name="`${item1.id}`"
      :class="!item1.children || item1.children.length == 0 ? 'no-arrow' : null"
    >
      <div
        :class="[
          'chapter-name',
          (item1.children && item1.children.length > 0) ||
          item1.chapterLevel == 1
            ? 'tt-hv'
            : null,
          current && current.id && current.id == item1.id ? 'current' : null
        ]"
        @click="pushRouter(item1)"
      >
        <div class="live-icon">
          <img
            src="~/static/img/live.gif"
            v-show="current && current.id && current.id == item1.id"
          />
        </div>
        <div
          :class="[
            'name-box',
            tabType == 'task' && item1.taskId ? 'task_box' : '',
            current && current.id && current.id == item1.id
              ? 'name-actived'
              : null
          ]"
        >
          {{ item1.chapterName }}
          <span style="margin-left:10px;" v-if="item1.duration">{{item1.duration}}</span>
          <span
            class="jump"
            v-if="
              item1.isJump == 1 &&
                Object.keys(user_info).length != 0 &&
                tabType == 'chapter'
            "
            >试看</span
          >
          <div class="taskBtn" v-if="tabType == 'task'">
            <Upload
              action="#"
              :before-upload="handleUploadTask"
              :show-upload-list="false"
              v-if="item1.taskType == 2"
            >
              <span @click="setTask(item1, $event)">{{
                item1.userTask ? "已经上传" : "上传作业"
              }}</span>
            </Upload>
            <span @click="setTask(item1, $event)" v-if="item1.taskType == 1">{{
              item1.userTask ? "考试完成" : "开始考试"
            }}</span>
          </div>
        </div>
      </div>
      <div slot="content" v-if="item1.children && item1.children.length > 0">
        <chapter-tree
          :datas="item1.children"
          :current="current"
          :isBuy="isBuy"
          :tabType="tabType"
          :getChapterList="getChapterList"
        ></chapter-tree>
      </div>
    </Panel>
  </Collapse>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import { saveUserTask, getVideoUrl } from "~/api/task";
export default {
  name: "ChapterTree",
  props: ["datas", "current", "isBuy", "tabType", "getChapterList"],
  components: {},
  data() {
    return {
      taskObj: {}
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      }
    }),
    courseId() {
      return this.$route.query.id;
    },
    active_tap: {
      get() {
        return this.datas.map(i => String(i.id));
      },
      set(val) {
        // return this.datas.map(i => String(i.id));
      }
    }
  },
  watch: {},
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    //上传我的作业
    async handleUploadTask(file) {
      console.log(file);
      this.SET_IS_LOADING(true);
      let params = {
        file: file,
        userId: this.user_info.id,
        taskId: this.taskObj.taskId
      };
      let fd = new FormData();
      Object.keys(params).forEach(i => {
        if (params[i] || params[i] === 0) {
          fd.append(i, params[i]);
        }
      });
      let result = await saveUserTask(fd);
      if (result && result.data && result.data.code == 200) {
        this.$Message.success("上传作业成功！");
        this.getChapterList();
        this.SET_IS_LOADING(false);
      } else if (result && result.data && result.data.code == 1001) {
        this.$Message.warning(result.data.msg);
        this.SET_IS_LOADING(false);
      } else {
        this.$Message.error("上传作业失败！");
        this.SET_IS_LOADING(false);
      }
      return false;
    },
    //设置我的作业报告的数据
    setTask(obj, event) {
      if (!!obj.userTask) {
        this.$Message.warning("该作业您已经完成了哟");
        event.stopPropagation();
        return false;
      }
      if (obj && obj.taskType == 2) {
        this.taskObj = obj;
      } else {
        console.log("跳转");
        this.$router.push("/task-paper?taskId=" + obj.taskId);
      }
    },
    async pushRouter(item) {
      // 获取点击项的数据 这里要改跳转链接
      // console.log(item);
      // return
      if (this.tabType == "task") {
        return;
      }
      // console.log("==========--===",item)
      if (Object.keys(this.user_info).length == 0) {
        return;
      }
      if (!this.isBuy && item.isJump != 1) {
        return;
      }
      // 保留阿里云直播,跳转到指定的直播地址
      if ((item.isLive == 1 || item.isLive == 2 || item.isLive == 4) && item.videoInfo) {
        // console.log(item); // 直播id
        this.SET_IS_LOADING(true);
        let result = await getVideoUrl(item.videoInfo.id);
        if (result && result.data && result.data.code == 200) {
          let newTab = window.open("_blank");
          newTab.location.href = result.data.data.liveUrl;
        } else if (result && result.data && result.data.code == 1001) {
          this.$Message.error(result.data.msg);
        } else {
          this.$Message.error("数据请求失败");
        }
        // 拦截加载项和阻止函数
        this.SET_IS_LOADING(false);
        return;
      }
      if (this.$route.name == "/play") {
        if (item.children && item.children.length > 0) {
          return;
        }
        this.$router.replace({
          path: "",
          query: {
            id: this.courseId,
            chapterId: item.id
          }
        });
      } else {
        if (item.children && item.children.length > 0) {
          return;
        }
        this.$router.replace({
          path: "/play",
          query: {
            id: this.courseId,
            chapterId: item.id
          }
        });
      }
    }
  },
  created() {},
  mounted() {}
};
</script>

<style lang="scss">
.component-chaptet_tree {
  border: none;
  .chapter-name {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
  }
  .tt-hv {
    font-size: 14px;
    color: #010101;
    font-weight: normal;
  }
  .ivu-tree-children {
    .ivu-tree-arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-right: 5px;
      height: 40px;
      i {
        font-size: 20px;
      }
    }
    .ivu-tree-title {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      height: 40px;
      &:hover {
        background: none;
      }
    }
    .ivu-tree-title-selected,
    .ivu-tree-title-selected:hover {
      background: none;
    }
  }
  .ivu-collapse {
    border: none;
  }
  .ivu-collapse-item {
    border: none;
  }
  .ivu-collapse-header {
    padding-left: 5px !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: #010101;
    font-weight: normal;
  }
  .ivu-collapse-content-box {
    padding-bottom: 0;
  }
  .no-arrow {
    .ivu-collapse-header {
      .ivu-icon {
        visibility: hidden;
      }
    }
  }
  .name-box {
    flex: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: initial;
    position: relative;
    &.task_box:hover {
      color: var(--theme-color);
      border-bottom: 1px solid #ddd;
    }
    .taskBtn {
      position: absolute;
      right: 0;
      top: 0;
    }
    .jump {
      color: #ff8a8a;
      // padding: 3px;
      border: 1px solid #ff8a8a;
    }
  }
  .live-icon {
    display: inline-block;
    margin-right: 7px;
    width: 20px;
    height: 20px;
    > img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .current {
    .live-icon {
      background-color: var(--theme-color);
    }
  }
  .name-actived {
    color: var(--theme-color);
  }

  i {
    margin-right: 0px !important;
  }
}
</style>
